<template>
  <!-- <div class="container">
    <header></header>
    <main>
      <aside>
        <ul>
          <li v-for="navItem in menus" :key="navItem.id" class="navItem">
            {{ navItem.title }}
            <ul>
              <li
                v-for="subNavItem in navItem.children"
                :key="subNavItem.id"
                class="subNavItem"
              >
                <router-link :to="'/home/'+subNavItem.path">{{
                  subNavItem.title
                }}</router-link>
              </li>
            </ul>
          </li>
        </ul>
       
      </aside>
      <main>
        <keep-alive>
          <router-view v-if="$route.meta.isKeepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.isKeepAlive"></router-view>
      </main>
    </main>
  </div> -->
  <el-container class="container">
     <el-aside class="menu" :width="isCollpase?'68px':'200px'">
        <div class="login">
          {{isCollpase?'蜗牛':' 蜗牛学苑'}}
        </div>
        <div>
           <el-menu 
              background-color="#383D49"
              text-color="#fff"
              active-text-color="#ff0"
              :unique-opened="true"
              :collapse="isCollpase"
              :router="true">
              <el-submenu :index="item.path" v-for="item in menus" :key="item.id">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
                <!--子菜单新项目-->
                <el-menu-item :index="'/home/'+subitem.path" v-for="subitem in item.children" :key="subitem.id">
                    <template slot="title">
                      <i :class="subitem.icon"></i>
                      <span>{{subitem.title}}</span>
                    </template>
                </el-menu-item>
              </el-submenu>
           </el-menu>
        </div>
     </el-aside>
    <el-container class="main-container">
       <el-header>
          <i class="el-icon-s-fold" v-if="!isCollpase" style="font-size:20px" @click="toggleCollpase"></i>
          <i class="el-icon-s-unfold" v-else style="font-size:20px" @click="toggleCollpase"></i>
       </el-header>
       <el-main>
           <keep-alive>
             <router-view v-if="$route.meta.isKeepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.isKeepAlive"></router-view>
       </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          id: "0",
          path: "",
          icon: "el-icon-user",
          title: "用户管理",
          children: [
            {
              id: "01",
              path: "usersList",
              icon: "el-icon-s-order",
              title: "用户列表",
            },
          ],
        },
        {
          id: "1",
          path: "",
          icon: "el-icon-user-solid",
          title: "学生管理",
          children: [
            {
              id: "11",
              path: "studentsList",
              icon: "el-icon-s-order",
              title: "学生列表",
            },
            {
              id: "12",
              path: "studentsAdd",
              icon: "el-icon-s-order",
              title: "新增学生",
            },
          ],
        },
        {
          id: "2",
          path: "",
          icon: "el-icon-s-goods",
          title: "班级管理",
          children: [
            {
              id: "21",
              path: "classesList",
              icon: "el-icon-s-order",
              title: "班级列表",
            },
            {
              id: "22",
              path: "classesAdd",
              icon: "el-icon-s-order",
              title: "新增班级",
            },
          ],
        },
        {
          key: "3",
          path: "",
          icon: "el-icon-s-platform",
          title: "专业管理",
          children: [
            {
              key: "31",
              path: "subjectsList",
              icon: "el-icon-s-order",
              title: "专业列表",
            },
          ],
        },
        {
          id: "4",
          path: "",
          icon: "el-icon-s-help",
          title: "课程管理",
          children: [
            {
              id: "41",
              path: "coursesList",
              icon: "el-icon-s-order",
              title: "课程列表",
            },
            {
              id: "42",
              path: "coursesAdd",
              icon: "el-icon-s-order",
              title: "增加课程",
            },
          ],
        },
        {
          id: "5",
          path: "",
          icon: "el-icon-picture",
          title: "教师管理",
          children: [
            {
              id: "51",
              path: "teachersList",
              icon: "el-icon-s-order",
              title: "教师列表",
            },
            {
              id: "42",
              path: "teachersAdd",
              icon: "el-icon-s-order",
              title: "增加教师",
            },
          ],
        },
      ],
      authMenus:[],
      isCollpase:false
    }
  },
  methods:{
    async getAuthMenus(){
        const {data}=await this.$api.users.getAuthMenus()
        this.authMenus=data
    },
    toggleCollpase(){
      this.isCollpase=!this.isCollpase
    }
  },
  computed:{
    menus(){
        const menusData=this.navList.map((item,index)=>{
            let childAuthAry=item.children.filter(child=>{
                return this.authMenus.includes(child.path)
            })
            if (childAuthAry.length>0) {
               return {...item,children:childAuthAry}
            }
        })
        return menusData.filter(item=>item)
    }
  },
  created(){
    this.getAuthMenus()
  }
};
</script>

<style lang="scss" scoped>
  .container{
    .menu{
      max-width: 220px;
      height: 100vh;
      background-color:#284156;
      color: white;
      .login{
       text-align: center;
       margin-top:20px;
       font-size:28px;
       font-family: '华文琥珀';
       font-style: n;
       margin-bottom: 20px;
      }
      .el-menu{
        border-right: none;
      }
    }
    .main-container{
      .el-header{
        position:sticky;
        width: 100%;
        height: 80px;
        background-color:#284156;
        color: #fff;
        line-height: 72px;
      }
      .el-main{
        flex: 1;
      }
    }
  }
</style>